<!DOCTYPE html>
<html>

    <%- include('includes/head') %>
    
    <!-- bootstrap datepicker -->
    <link rel="stylesheet" href="/bower_components/bootstrap-datepicker/dist/css/bootstrap-datepicker.min.css">

	<body class="hold-transition skin-blue sidebar-mini">

		<div class="wrapper">

			<!-- The header is the topbar -->
			<%- include('includes/header') %>

			<!-- The sidebar includes the menu -->
			<%- include('includes/sidebar') %>

			<!-- Content Wrapper. Contains page content -->
			<div class="content-wrapper">

				<!-- Content Header (Page header) -->
				<section class="content-header">
					<h1> <%= translate("UTILS").SETTINGS %> <small> Version 1.0.0-beta </small> </h1>
				</section>

				<!-- Main content -->
                <section class="content">
    
                    <!-- Info boxes -->
                    <div class="row">
                        <div class="col-md-12">
                            <!-- general form elements -->
                            <div class="box box-primary">
                                <div class="box-header with-border">
                                    <h3 class="box-title"><%= translate("economy/profile:YOUR_PROFILE") %></h3>
                                </div>
                                <!-- /.box-header -->
                                <!-- form start -->
                                <form role="form" action="/settings" method="POST">
                                    <div class="box-body">
                                        <div class="row">
                                            <div class="col-md-6">
                                                <div class="form-group">
                                                    <label><%= translate("economy/profile:BIO") %></label>
                                                    <input name="bio" class="form-control" placeholder="<%= user.bio || translate("economy/profile:NO_BIO") %>">
                                                </div>
                                                <div class="form-group">
                                                    <label><%= translate("economy/profile:BIRTHDATE") %></label>
                                                    <div class="input-group date">
                                                        <div class="input-group-addon">
                                                        <i class="fa fa-calendar"></i>
                                                        </div>
                                                        <input type="text" name="birthdate" class="form-control pull-right" id="datepicker" placeholder="<%= printDate(new Date(user.birthdate)) %>">
                                                    </div>
                                                    <!-- /.input group -->
                                                </div>
                                                <!-- /.form group -->
                                            </div>
                                        </div>
                                    </div>
                                    <!-- /.box-body -->
                                    <div class="box-footer">
                                        <button type="submit" class="btn btn-primary"><%= translate("common:UPDATE") %></button>
                                    </div>
                                </form>
                            </div>
                          <!-- /.box -->
                        </div>
                        <!-- ./col -->
                    </div>
                    <!-- /.row -->
                </section>
                <!-- /.content -->
            </div>
            <!-- /.content-wrapper -->
            <%- include('includes/footer') %>
		</div>
        <!-- ./wrapper -->
        <!-- bootstrap datepicker -->
        <script src="/bower_components/bootstrap-datepicker/dist/js/bootstrap-datepicker.min.js"></script>
        <!-- ChartJS -->
        <script src="/bower_components/chart.js/Chart.js"></script>
        <script>
            $(function(){
                $("#datepicker").datepicker({
                    autoclose: true
                });
            });
        </script>
	</body>
</html>